<template>
  <div class="app-container">
    <div v-if="isList">
      <div class="flex mb-4">
        <div class="md:w-2/3">
          <p class="text-xl mb-2">总计</p>
          <el-table :data="totalData" border stripe>
            <el-table-column v-for="col in columns"
              :prop="col.property"
              :key="col.id"
              :label="col.label"
              :width="col.width">
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-grow ml-8">
          <p class="text-xl mb-2">筛选</p>
          <div class="flex">
            
            <!-- <el-select v-model="listQuery.app_type" clearable filterable placeholder="注册方式">
              <el-option v-for="item in appTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input v-model="listQuery.nickname" class="marginRB10" clearable placeholder="昵称" style="width:200px;"
            ></el-input>
            <el-input v-model="listQuery.channel_no" class="marginRB10" clearable placeholder="渠道" style="width:200px;"
            ></el-input> -->
            <!-- <el-select v-model="listQuery.channel_no" class="filter-item marginRB10" clearable filterable
                      placeholder="请选择渠道" style="width: 200px;"
            >
              <el-option v-for="item in headerList.channel_list" :key="item.channel_no" :label="item.name"
                        :value="item.channel_no"
              ></el-option>
            </el-select> -->
            <el-input v-model="listQuery.keyword" class="marginRB10" clearable placeholder="用户ID" style="width:200px;"
            ></el-input>
            <!-- <el-input v-model="listQuery.mobile" class="marginRB10" clearable placeholder="手机号" style="width:200px;"
            ></el-input> -->
            <el-button class="marginRB10" icon="el-icon-search" type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </div>
      </div>

      <p class="text-xl mb-2">统计</p>
      <el-table ref="dataList" :data="menuList" border row-key="id" style="margin-bottom: 20px;">
        <el-table-column label="用户编号" prop="user_code"></el-table-column>
        <el-table-column label="用户昵称" prop="nickname"></el-table-column>
        <el-table-column label="用户昵称" prop="user_id"></el-table-column>
        <el-table-column label="充值金额" prop="money" sortable></el-table-column>
        <el-table-column label="会员手机" prop="mobile"></el-table-column>
        <el-table-column label="渠道编号" prop="channel_no"></el-table-column>
        <el-table-column label="渠道名称" prop="channel_namae"></el-table-column>
        <el-table-column label="注册时间" prop="register_time"></el-table-column>
          <!-- <template slot-scope="scope">
            <div v-for="(i,index) in headerList.channel_list" :key="index"><span v-if="i.channel_no ===scope.row.channel_no">{{i.name}}</span></div>
          </template> -->
        <!-- <el-table-column label="可用金币" prop="money"></el-table-column>
        <el-table-column label="收益" prop="earnings"></el-table-column> -->
        <!-- <el-table-column label="注册方式" prop="app_type">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.app_type === 1" type="primary">回声</el-tag>
            <el-tag v-else-if="scope.row.app_type === 2" type="success">回声</el-tag>
          </template>
        </el-table-column> -->

        <!-- <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" plain size="mini" type="primary" @click="handleUpdate(scope.row)">查看详情
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <cus-pagination v-show="total>0" :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total"
                      @pagination="getList"
      />
    </div>

    <div v-if="!isList">
      <el-button class="marginRB10" @click="isList = true">返回</el-button>
      <el-button class="marginRB10" type="success" @click="goList(1)">礼物记录</el-button>
      <el-button class="marginRB10" type="info" @click="goList(2)">在线时间</el-button>
      <el-button class="marginRB10" type="danger" @click="goList(3)">私聊记录</el-button>
      <el-button class="marginRB10" type="primary" @click="goList(4)">聊天室记录</el-button>

      <div v-if="listNum === 1">
        <el-table ref="dataList" :data="menuList1" border row-key="id" style="margin-bottom: 20px;">
          <el-table-column label="礼物" prop="gift_info"></el-table-column>
          <el-table-column label="赠送信息" prop="give_gift"></el-table-column>
          <el-table-column label="礼物价值" prop="total_price"></el-table-column>
          <el-table-column label="特殊币" prop="coin"></el-table-column>
          <el-table-column label="时间" prop="add_time"></el-table-column>
        </el-table>
      </div>
      <div v-if="listNum === 2">
        <el-table ref="dataList" :data="menuList2" border row-key="id" style="margin-bottom: 20px;">
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="房间id" prop="room_id"></el-table-column>
          <el-table-column label="房间名称" prop="room_name"></el-table-column>
          <el-table-column label="加入时间" prop="join_time"></el-table-column>
          <el-table-column label="离开时间" prop="left_time"></el-table-column>
          <el-table-column label="在线时间" prop="total_seconds" sortable></el-table-column>
        </el-table>
      </div>
      <div v-if="listNum === 3">
        <el-input v-model="privateChatForm.content" class="marginRB10" clearable placeholder="消息内容"
                  style="width:200px;"
        ></el-input>
        <el-input v-model="privateChatForm.nickname" class="marginRB10" clearable placeholder="对方昵称"
                  style="width:200px;"
        ></el-input>
        <el-input v-model="privateChatForm.user_code" class="marginRB10" clearable placeholder="对方ID"
                  style="width:200px;"
        ></el-input>
        <el-button class="marginRB10" icon="el-icon-search" type="primary" @click="getList">搜索</el-button>
        <el-table ref="dataList" :data="menuList3" border row-key="id" style="margin-bottom: 20px;">
          <el-table-column label="对方昵称" prop="nickname"></el-table-column>
          <el-table-column label="用户id" prop="user_code"></el-table-column>
          <el-table-column label="消息内容" prop="content"></el-table-column>
          <el-table-column label="消息时间" prop="add_time">
            <template slot-scope="{row}">
              <el-tag v-text="new Date(row.add_time * 1000).toLocaleString()"></el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="pagination3.page"
          :page-size="parseInt(pagination3.limit)"
          :total="pagination3.total"
          background
          hide-on-single-page
          layout="prev, pager, next"
          style="text-align: right"
          @current-change="handlePagination3PageChange"
        >
        </el-pagination>
      </div>
      <div v-if="listNum === 4">
        <el-input v-model="roomChatForm.content" class="marginRB10" clearable placeholder="消息内容" style="width:200px;"
        ></el-input>
        <el-input v-model="roomChatForm.room_name" class="marginRB10" clearable placeholder="房间名称" style="width:200px;"
        ></el-input>
        <el-input v-model="roomChatForm.room_id" class="marginRB10" clearable placeholder="房间ID" style="width:200px;"
        ></el-input>
        <el-button class="marginRB10" icon="el-icon-search" type="primary" @click="getList">搜索</el-button>
        <el-table ref="dataList" :data="menuList4" border row-key="id" style="margin-bottom: 20px;">
          <el-table-column label="房间名称" prop="room_name"></el-table-column>
          <el-table-column label="房间id" prop="room_id"></el-table-column>
          <el-table-column label="发送消息" prop="content"></el-table-column>
          <el-table-column label="发送时间" prop="add_time">
            <template slot-scope="{row}">
              <el-tag v-text="new Date(row.add_time * 1000).toLocaleString()"></el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="pagination4.page"
          :page-size="parseInt(pagination4.limit)"
          :total="pagination4.total"
          background
          hide-on-single-page
          layout="prev, pager, next"
          style="text-align: right"
          @current-change="handlePagination4PageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  deleteData,
  getPrivateChat,
  getRoomChat,
  listData,
  listData1,
  listData2,
  saveData,
  updateData
} from '@/api/channel/channelUser'

export default {
  data() {
    return {
      appTypeOptions: [{ value: 1, label: '回声' }, { value: 2, label: '回声' }],
      totalData: [],
      columns: [
        {
          id: 1,
          label: '渠道总邀请人数(人)',
          property: 'user_total',
          width: 'auto'
        },
        {
          id: 2,
          label: '总充值金额（元）',
          property: 'recharge_total',
          width: 'auto'
        },
        {
          id: 3,
          label: '渠道编号',
          property: 'channel_no',
          width: 'auto'
        },
      ],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        channel_no: undefined,
        nickname: '',
        keywords: '',
        mobile: '',
        app_type: undefined
      },
      selectList2: [{ key: undefined, lab: '全部分类' }, { key: '1', lab: '房间礼物 ' }, { key: '2', lab: '游戏礼物' }],
      menuList: [],
      menuList1: [],
      total1: 0,
      listQuery1: {
        page: 1,
        perPage: 10
      },
      privateChatForm: {
        user_id: '',
        user_code: '',
        nickname: '',
        content: ''
      },
      roomChatForm: {
        user_id: '',
        room_id: '',
        room_name: '',
        content: ''
      },
      menuList2: [],
      total2: 0,
      listQuery2: {
        page: 1,
        perPage: 10
      },
      menuList3: [],
      pagination3: {},   // 私聊记录分页信息
      total3: 0,
      listQuery3: {
        page: 1,
        perPage: 10
      },
      menuList4: [],
      pagination4: {},
      total4: 0,
      listQuery4: {
        page: 1,
        perPage: 10
      },
      headerList: {},
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      isList: true,
      listNum: 1,
      listUser_id: '',
      form: {
        id: undefined,
        name: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.listQuery.channel_no = this.$route.query.channel_no
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      let obj = {}
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        /* key,this.listQuery[key])
        if(this.listQuery[key] === true){
          obj[key] = this.listQuery[key]
        } */
      }
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.headerList = response.data.header
        this.total = response.data.meta.total
        response.data.header.channel_no = this.$route.query.channel_no
        this.totalData = [response.data.header]
        this.listLoading = false
      })
    },
    handlePagination3PageChange(page) {
      getPrivateChat({ ...this.privateChatForm, perPage: 10, page: page })
        .then(({ code, data }) => {
          this.menuList3 = data.list
          this.pagination3 = data.meta
        })
    },
    handlePagination4PageChange(page) {
      getRoomChat({ ...this.roomChatForm, perPage: 10, page: page })
        .then(({ code, data }) => {
          this.menuList4 = data.list
          this.pagination4 = data.meta
        })
    },
    handleCreate(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      this.isList = false
      this.listUser_id = row.user_id
      this.privateChatForm.user_id = row.user_id
      this.goList(1)
      // this.form = []
      // this.form.id= row.id
      // this.form.name= row.name
      //
      // this.dialogStatus = 'update'
      // this.dialogFormVisible = true
      //
      // this.form = Object.assign({}, this.form)
    },
    goList(type) {
      this.listNum = type
      if (type === 1) {
        this.listQuery1.user_id = this.listUser_id
        listData1(this.listQuery1).then(response => {
          this.menuList1 = response.data.list
          this.total1 = response.data.meta.total
        })
      } else if (type === 2) {
        this.listQuery2.user_id = this.listUser_id
        listData2(this.listQuery2).then(response => {
          this.menuList2 = response.data.list
          this.total2 = response.data.meta.total
        })
      } else if (type === 3) {
        getPrivateChat({ ...this.privateChatForm, perPage: 10 })
          .then(({ code, data }) => {
            this.menuList3 = data.list
            this.pagination3 = data.meta
          })
      } else if (type === 4) {
        getRoomChat({ ...this.roomChatForm, perPage: 10 })
          .then(({ code, data }) => {
            this.menuList4 = data.list
            this.pagination4 = data.meta
          })
      }
    },
    handleDelete(row) {
      let data = { ids: row.id }
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          // this.submitOk('删除成功')
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          // this.submitFail('删除失败')
          this.$message({
            message: response.message,
            type: 'error'
          })
        }
      })
    },
    allDel() {

      let delNum = []
      this.$refs.dataList.selection.forEach((k) => {
        delNum.push(k.id)
      })
      if (delNum.length === 0) {
        return
      }
      let data = { ids: delNum.toString() }
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          // this.submitOk('删除成功')
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          // this.submitFail('删除失败')
          this.$message({
            message: response.message,
            type: 'error'
          })
        }
      })
    },
    submitForm() {
      this.$refs['dataForm'].validate(valid => {
        if (valid && this.dialogStatus === 'create') {
          let formData = new FormData()
          for (let item in this.form) {
            this.form[item] === undefined ? '' : formData.append(item, this.form[item])
          }
          saveData(formData).then(response => {
            if (response.code === 200) {
              this.getList()
              // this.submitOk(response.message)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible = false
            } else {
              // this.submitFail(response.message)
              this.$message({
                message: response.message,
                type: 'error'
              })
            }
          })
        } else if (valid && this.dialogStatus === 'update') {
          let formData = new FormData()
          for (let item in this.form) {
            this.form[item] === undefined ? '' : formData.append(item, this.form[item])
          }
          updateData(formData).then(response => {
            if (response.code === 200) {
              this.getList()
              // this.submitOk(response.message)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.dialogFormVisible = false
            } else {
              // this.submitFail(response.message)
              this.$message({
                message: response.message,
                type: 'error'
              })
            }
          })
        }
      })
    },
    resetForm() {
      this.form = {
        id: undefined,
        name: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    },
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
